Un desplazamiento simple
1. Objetivo Vamos a desplazar, ininterrumpidamente, un caja <div> de izquierda a derecha y luego de derecha a izquierda.
2. La estructura Vamos a crear una caja <div> con el código de identificación #caja. <div id="caja"><p> </p></div>
Le vamos a aplicar un estilo muy sencillo:
#caja { background-color: red; position: relative; width: 100px; height: 100px; }
3. La animación
Nuestra caja roja deberá desplazarse hasta una posición fijada en la mitad de la duración total y, a continuación, volverá a su posición inicial, para finalizar la animación. Necesitaremos por lo tanto tres keyframes: a 0%, 50% y 100%. Indicaremos la posición a la que deberá llegar en cada etapa con la propiedad left. Hemos llamado a la animación redBox.
@-webkit-keyframes redBox { 0% { left: 10px; }
50% { left: 400px; }
100% { left: 10px; } }
@-moz-keyframes redBox { 0% { left: 10px; }
50% { left: 400px; } 100% { left: 10px; } }
@keyframes ’redBox’ { 0% { left: 10px; }
50% { left: 400px;